<template>
  <div class="myBox">
    <slot name="check" :value="value" :indeterminate="indeterminate">
      <Checkbox v-model="value" :indeterminate="indeterminate" @on-change="onChange">全选</Checkbox>
    </slot>
  </div>
</template>
<script>
export default {
  props: ['modelValue'],
  name: 'myBox',
  data() {
    return {
      indeterminate: false,
      value: false
    }
  },
  watch: {
    modelValue: {
      handler(newValue) {
        let isAll = newValue.every((res) => res.selected)
        let isSome = newValue.some((res) => res.selected)
        this.value = isAll
        this.indeterminate = !isAll && isSome
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onChange(e) {
      this.modelValue.forEach((element) => {
        element.selected = e
      })
    }
  },
  mounted() {}
}
</script>
<style lang="scss" scoped>
.myBox {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
